<script>
import './ck-content.css'
import dataApi from './data-api'
import DocsAttachment from './DocsAttachment.vue'
export default {
  components: {
    DocsAttachment
  },
  computed: {
    dpi () {
      return dataApi.core.dpi
    },
    background () {
      return dataApi.core.background
    },
    hasDocsAttachment () {
      return dataApi.core.docsAttachment.list.length > 0
    }
  },
  render () {
    let { dpi, background } = this
    let vCont
    if (this.hasDocsAttachment) {
      vCont = <DocsAttachment />
    } else {
      vCont = this.$slots.default
    }
    return (
      <div
        class="view-box"
        style={{
          'background-image': `url(${background.image})`,
          'background-color': background.color,
          width: dpi.width + 'px',
          height: dpi.height + 'px'
        }}
      >
        {vCont}
      </div>
    )
  }
}
</script>

<style scoped>
.view-box {
  position: relative;
  width: 1024px;
  height: 1920px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
